import { useEffect, useState } from "react";


export default function List(props) {
    const [data, setData] = useState()
    useEffect(() => { 
        const arr=[]
        // arr.length=10000
        for (let i = 0; i < 10000; i++) {
            arr.push(i+1)
        }
        setData(arr)

    }, [props.str])
    return (
        <div>
            <h1>List--------{props.str}</h1>
            {data && data.map((item)=>{
                return <div key={item}>{props.str}</div>
            })}
        </div>
    );
}


//父子传参接收的参数可以用{}来获取
// export default function List({ str }) {

//     const [data, setData] = useState()

//     useEffect(() => {
//         const arr = []
//         // arr.length = 10000
//         for (let i = 0; i < 20000; i++) {
//             // arr.fill(i + 1, i)
//             arr.push(i + 1)
//         }
//         setData(arr)
//     }, [str])

//     return <div>
//         {data && data.map(item => {
//             return <p key={item}>{str}</p>
//         })}
//     </div>
// }

//接收参数的解析类似于
// function fn(props) {
//     props.name
//     props.age
// }
// function fn({ name, age }) {
//     name
//     age
// }

// fn({ name: 'aa', age: 18 })